<template>
  <div class="group-page">
    <mu-flex
      class="main-operate"
      justify-content="between"
      align-items="center"
    >
      <mu-flex align-items="center">
        <div class="tab-item" @click="redirectToPersonal">
          个人
        </div>
        <div class="tab-item tab-item-active">小组</div>
      </mu-flex>
    </mu-flex>
    <mu-paper class="main-data">
      <div v-show="loading" class="loading-progress">
        <mu-linear-progress
          :value="linear"
          mode="determinate"
        ></mu-linear-progress>
      </div>
      <mu-flex class="info" justify-content="between" align-items="center">
        <mu-flex align-items="center">
          <img
            src="https://image.xuexiwangzhe.com/FoAU_Ex4NT1VnWHFWXC7WMyV2ja0"
            class="img-info"
          />
          <span class="info-content"
            >友情提示：若课程未结束，请刷新页面查看最新数据</span
          >
        </mu-flex>
        <div>
          <mu-button class="operate-btn" flat @click="exportData">
            <img
              class="operate-btn-img"
              src="https://image.xuexiwangzhe.com/Fn7HDwm57kMxOjMvuBqZLGI3yKS9"
            />
            导出数据
          </mu-button>
          <mu-button class="operate-btn" flat @click="getData">
            <img
              class="operate-btn-img"
              src="https://image.xuexiwangzhe.com/FqVBxuSbrGY7Xlfz9SO0DHh1VtXw"
            />
            刷新
          </mu-button>
        </div>
      </mu-flex>
      <div
        :class="['data-item', index < 3 ? `data-item-${index + 1}` : '']"
        v-for="(item, index) in list"
        :key="index"
      >
        <mu-flex align-items="center" justify-content="between" class="header">
          <mu-flex align-items="center">
            <mu-flex class="group" align-items="end">
              <div class="rank" v-html="rankContent(index)"></div>
              <span class="group-name">{{ item.groupName }}</span>
            </mu-flex>
            <mu-flex class="content-item credit" align-items="end">
              <div class="content-item-title">总积分</div>
              <div class="content-item-num">{{ item.totalCredit }}</div>
            </mu-flex>
            <mu-flex class="content-item" align-items="end">
              <div class="content-item-title">平均分</div>
              <div class="content-item-num">{{ item.avaCredit }}</div>
            </mu-flex>
          </mu-flex>
          <div>
            <span class="content-item-title">波动</span>
            <img
              v-if="item.change === 1"
              src="https://image.xuexiwangzhe.com/FhqMZ-Rm8Pib94i_Qo7tU9ReDNvR"
              class="change-img"
            />
            <img
              v-if="item.change === -1"
              src="https://image.xuexiwangzhe.com/FmmVH53ZUK4F3HF7heqOA7sirmYT"
              class="change-img"
            />
            <img
              v-if="item.change === 0"
              src="https://image.xuexiwangzhe.com/FtbHizVLXiP0C9Sh9o235Y5En-c2"
              class="change-img"
            />
          </div>
        </mu-flex>
        <mu-flex wrap="wrap" class="users" align-items="center">
          <mu-flex
            v-for="(childitem, childindex) in item.personCreditVos"
            :key="childitem.userId"
            align-items="center"
            class="users-item"
          >
            <mu-avatar class="user-avatar" size="35">
              <img :src="baseImgUrl + childitem.photo" />
            </mu-avatar>
            <span class="user-name">{{ childitem.userName }}</span>
            <span
              :class="['user-score', childindex < 4 ? 'user-score-rank' : '']"
              >{{ childitem.credit }}</span
            >
          </mu-flex>
        </mu-flex>
      </div>
    </mu-paper>
  </div>
</template>

<script>
export default {
  props: ["projectid"],
  data() {
    return {
      baseImgUrl: "https://image.xuexiwangzhe.com/",
      list: [],
      linear: 10,
      loading: false,
    };
  },
  created() {
    this.getData();
  },
  methods: {
    redirectToPersonal() {
      const _queryPms = new URLSearchParams(this.$route.query);
      this.$router.push("/index/personal?" + _queryPms);
    },
    startloading() {
      this.loading = true;
      this.linear = 90;
      this.timer = setInterval(() => {
        this.linear += 10;
        if (this.linear >= 90) clearInterval(this.timer);
      }, 1000);
    },
    exportData() {
      let params = {
        projectId: this.projectid,
        SESSIONKEY: sessionStorage.getItem("SESSIONKEY"),
      };

      let urlpath =
        "https://minitool.xuexiwangzhe.com/miniapp/creditresult/downloadGroupCredit";
      let urlpms = new URLSearchParams(params);
      let url = urlpath + "?" + urlpms.toString();
      location.href = url;
    },
    getData() {
      this.startloading();
      const params = {
        projectId: this.projectid,
      };
      this.$axios.get("/creditresult/groupCredit", { params }).then((res) => {
        if (res.success) {
          this.list = res.groupCreditVos;
          this.linear = 100;
          setTimeout(() => {
            this.loading = false;
          }, 500);
        }
      });
    },
    rankContent(index) {
      switch (index) {
        case 0:
          return '<img src="https://image.xuexiwangzhe.com/FoaFfXXgv_9INm3qtGTk6eEKRDne" class="rank-img"/>';
        case 1:
          return '<img src="https://image.xuexiwangzhe.com/FgtCyy2q8nd4pdOT5p-Q1zimAu7J" class="rank-img"/>';
        case 2:
          return '<img src="https://image.xuexiwangzhe.com/FsqtF4ImZkeueUol32MXtCjA2TF3" class="rank-img"/>';
        default:
          return `<span class="rank-normal">${index + 1}</span>`;
      }
    },
  },
};
</script>
<style lang="less">
.group-page {
  margin: 0 auto;
  width: 1250px;
  height: 100%;

  .main-operate {
    width: 100%;
    padding-top: 30px;
    margin-bottom: 20px;
  }

  .main-data {
    position: relative;
    padding: 20px;
    box-shadow: 2px 5px 7px 0px rgba(197, 197, 197, 0.2);
    border-radius: 8px;

    .loading-progress {
      position: absolute;
      width: 100%;
      top: 0;
      left: 0;
    }
    .info {
      margin-bottom: 30px;
    }

    .img-info {
      width: 20px;
      margin-right: 10px;
    }

    .info-content {
      color: #bab7b7;
    }

    .operate-btn {
      &:last-child {
        margin-right: 0;
      }
      &-img {
        width: 13px;
        margin-right: 10px;
      }
      margin-right: 10px;
      color: #3366ff;
    }
  }

  .data-item {
    border: 1px solid #f3f3f3;
    border-radius: 6px;
    margin-bottom: 30px;

    .header {
      background-color: #f3f3f3;
      padding: 13px 25px;
    }

    .group {
      margin-right: 120px;
      font-size: 18px;
      color: #010101;
      line-height: 1;
    }

    .group-name {
      padding-bottom: 5px;
    }

    .rank {
      line-height: 1;
      margin-right: 25px;
    }

    .rank-normal {
      display: block;
      background-color: #b4bfc3;
      width: 30px;
      height: 30px;
      line-height: 30px;
      border-radius: 50%;
      text-align: center;
      color: #fff;
    }

    .rank-img {
      width: 25px;
    }

    .credit {
      margin-right: 80px;
    }

    .change-img {
      width: 12px;
    }

    .users {
      padding: 30px 10px 10px 68px;
    }

    .users-item {
      &:nth-child(5n) {
        width: 150px;
      }
      width: 240px;
      margin-bottom: 20px;
      font-size: 18px;
      line-height: 1;
    }

    .user-avatar {
      margin-right: 15px;
    }

    .user-name {
      color: #585858;
      margin-right: 20px;
      font-size: 14px;
    }

    .user-score {
      color: #a1a1a1;
    }

    .user-score-rank {
      color: #000;
    }

    .content-item {
      line-height: 1;
    }

    .content-item-title {
      color: #626262;
      margin-right: 21px;
      padding-bottom: 4px;
    }

    .content-item-num {
      font-size: 24px;
    }
  }

  .data-item-1 {
    border: 1px solid #f6e8e6;
    .header {
      background-color: #fdf2f1;
    }
    .content-item-num {
      color: #f88849;
    }
  }

  .data-item-2 {
    border: 1px solid #daf2fd;
    .header {
      background-color: #e6f7fe;
    }
    .content-item-num {
      color: #6abafb;
    }
  }

  .data-item-3 {
    border: 1px solid #e7f5dc;
    .header {
      background-color: #f5feee;
    }
    .content-item-num {
      color: #c07afb;
    }
  }

  .tab-item {
    &:last-child {
      margin-right: 0;
    }
    cursor: pointer;
    height: 60px;
    line-height: 60px;
    margin-right: 35px;
    font-size: 16px;
    color: #a3a3a3;
  }

  .tab-item-active {
    position: relative;
    font-size: 25px;
    color: #000;
    font-weight: bold;

    &::after {
      content: "";
      display: block;
      position: absolute;
      height: 5px;
      width: 20px;
      background-color: #3366ff;
      bottom: 0px;
      left: 50%;
      -webkit-transform: translate(-50%, 0);
      transform: translate(-50%, 0);
    }
  }
}
</style>
